angular.module('Controller')
.controller 'WFDragLayoutCtrl', ()->
    $grid = $('.grid');
    $root = $('#drag-layout-container');
    uuid = 0;
    grid = null;
    generateElements = () ->
        ret = [];
        $.each window.localStorage.urlModules, (index, value) ->
            width = "#{value.width}".replace '%',''
            height = "#{value.height}".replace 'px',''

            contentDiv = document.createElement('iframe');
            contentDiv.setAttribute('class', 'myiframe');
            contentDiv.setAttribute('src', value.url);

            editDiv = document.createElement("div");
            editDiv.setAttribute('class', 'edit-container');


            formGroup1 = document.createElement("div");
            formGroup1.setAttribute('class', 'form-group');
            label1 = document.createElement("label");
            label1.innerHTML = '宽度'
            myInput_1 = document.createElement("input");
            myInput_1.setAttribute('class', 'input_width');
            myInput_1.setAttribute('type', 'text');
            myInput_1.setAttribute('value', width);
            formGroup1.appendChild(label1)
            formGroup1.appendChild(myInput_1)

            formGroup2 = document.createElement("div");
            formGroup2.setAttribute('class', 'form-group');
            label2 = document.createElement("label");
            label2.innerHTML = '高度'
            myInput_2 = document.createElement("input");
            myInput_2.setAttribute('class', 'input_height');
            myInput_2.setAttribute('type', 'text');
            myInput_2.setAttribute('value', height);
            formGroup2.appendChild(label2)
            formGroup2.appendChild(myInput_2)

            formGroup3 = document.createElement("div");
            formGroup3.setAttribute('class', 'form-group');
            label3 = document.createElement("label");
            label3.innerHTML = '标题'
            myInput_3 = document.createElement("input");
            myInput_3.setAttribute('type', 'text');
            myInput_3.setAttribute('value', value.title);
            formGroup3.appendChild(label3)
            formGroup3.appendChild(myInput_3)

            formGroup4 = document.createElement("div");
            formGroup4.setAttribute('class', 'form-group');
            label4 = document.createElement("label");
            label4.innerHTML = 'URL'
            myInput_4 = document.createElement("input");
            myInput_4.setAttribute('type', 'text');
            myInput_4.setAttribute('value', value.url);
            formGroup4.appendChild(label4)
            formGroup4.appendChild(myInput_4)

            myInput_5 = document.createElement("input");
            myInput_5.setAttribute('class', 'hidden');
            myInput_5.setAttribute('type', 'text');
            myInput_5.setAttribute('value', value.order);

            saveBtn = document.createElement("button");
            saveBtn.setAttribute('class', 'input_save btn btn-primary btn-w-md');
            saveBtn.innerText = '保存';

            editDiv.appendChild(formGroup1);#宽度
            editDiv.appendChild(formGroup2);#高度
            editDiv.appendChild(formGroup3);#标题
            editDiv.appendChild(formGroup4);#url
            editDiv.appendChild(myInput_5);#顺序
            editDiv.appendChild(saveBtn);#保存
            adminRemoveBtn = document.createElement("button");
            adminRemoveBtn.setAttribute('class', 'admin-remove btn btn-primary btn-w-md');
            adminRemoveBtn.innerText = '保存';
            adminEditBtn = document.createElement("button");
            adminEditBtn.setAttribute('class', 'admin-edit btn btn-primary btn-w-md');
            adminEditBtn.innerText = '编辑';

            stuffDiv = document.createElement('div');
            stuffDiv.setAttribute('class', 'item-stuff');
            stuffDiv.appendChild(adminRemoveBtn)
            stuffDiv.appendChild(adminEditBtn)

            innerDiv = document.createElement('div');
            innerDiv.setAttribute('class', 'item-content');
            innerDiv.appendChild(stuffDiv);
            innerDiv.appendChild(contentDiv);

            innerDiv.appendChild(editDiv);
            $(innerDiv).hide();


            outerDiv = document.createElement('div');
            outerDiv.setAttribute('class', 'item');
            outerDiv.setAttribute('style', 'width:' + value.width + ';height:' + value.height);
            outerDiv.appendChild(innerDiv);
            ret.push(outerDiv);


            if value.hideModule == 0
                $(stuffDiv).hide();
                contentDiv.onload = ->
                    $(contentDiv).css('height', '100%')
            else
                $(stuffDiv).show();
                $(contentDiv).css('height', '80%')
        ret
    init = ()->
        if (!grid)
            dragCounter = 0;

            grid = new Muuri({
                  container: $grid.get(0),
                  items: generateElements(),
                  dragEnabled: $localStorage.setting,
                  dragReleaseEasing: 'ease-in',
                  dragContainer: document.getElementById("#drag-layout-container")
            })

            top.grid = grid;

            grid.on('dragstart', ()->
                ++dragCounter;
                $root.addClass('dragging');
            ).on('dragend', ()->
                if (--dragCounter < 1)
                    $root.removeClass('dragging');
            )
        refresh()
        layout()


    destroy=()->
        if grid
            grid.destroy();
            $grid.empty();
            grid = null;
            uuid = 0;

    show=()->
        if grid
            grid.show grid.get('inactive').slice(0, 5), (items)->
                console.log('CALLBACK: Hide ' + items.length + ' items')

    hide=()->
        if grid
            grid.hide grid.get('active').slice(0, 5), (items)->
                console.log('CALLBACK: Hide ' + items.length + ' items')

    add =()->
        if grid
            items = generateElements()
            _.each items,(item)->
                item.style.display = 'none'
            grid.show grid.add(items), (items)->
                console.log('CALLBACK: Added ' + items.length + ' items')

    remove=()->
        if grid
            grid.hide grid.get('active').slice(0, 4), (items)->
                grid.remove(items, true)
                console.log('CALLBACK: Removed ' + items.length + ' items');


    layout=()->
        if grid
            grid.layout ()->
                console.log('CALLBACK: Layout')

    refresh=()->
        if grid
            grid.refresh();

    synchronize=()->
        if grid
            grid.synchronize();
    saveUrlModule=()->
        tmp = []
        _.each $(".item"),(item)->
            w= $($(item).find("input"))[0].val()
            h= $($(item).find("input"))[1].val()
            title = $($(item).find("input"))[2].val()
            url = $($(item).find("input"))[3].val()
            order = $($(item).find("input"))[4].val()
            translates = $(item).css("transform");
            translateX = parseFloat(translates.substring(7).split(',')[4]);
            translateY = parseFloat(translates.substring(7).split(',')[5]);
            tmp.push {order:order,x:translateX,y:translateY,w:"#{w}%",h:"#{h}px",title:title,url:url}
        yyy = _.groupBy tmp,(item)->
            item.y
        zzz = []
        _.each yyy,(group)->
            xxx = _.sortBy group,(item)->
                item.x
            zzz = zzz.concat(xxx)
        console.log zzz
        tmpModules = []
        _.each zzz,(item,index)->
            tmpModules.push window.localStorage.urlModules[parseInt(item.order)]
            tmpModules[index].order = index
            tmpModules[index].width = item.w
            tmpModules[index].height = item.h
            tmpModules[index].title = item.title
            tmpModules[index].url = item.url
        window.localStorage.urlModules = tmpModules






